<template>
  <div>
    <div
      ref="wrapper"
      :style="{'-webkit-overflow-scrolling': scrollMode,height:'8.8rem',overflow:'scroll'}"
    >
      <v-loadmore
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        :auto-fill="false"
        ref="loadmore"
      >
        <ul class="invite_wrap">
          <li v-for="(item ,index) in inviteArr" :key="index">
            <div class="icon">
              <img src="../../../assets/img/ps_1.png" alt>
            </div>
            <div class="half">
              <div class="tit">{{item.NickName}}</div>
              <div class="phone">电话：{{item.Accounts.substr(0,3)+"****"+item.Accounts.substr(7)}}</div>
            </div>
            <div class="half halfR">
              <div class="time">注册时间{{(item.RegisterDate).toString().split(' ')[0]}}</div>
              <div class="btn" @click="activate(item)">
                <span>激活</span>
              </div>
            </div>
          </li>
        </ul>
      </v-loadmore>
    </div>
    <div class="payMask" v-if="isPayMask">
      <div class="mian">
        <div class="title">
          <i @click="isPayMask=false" class="iconfont icon-guanbi"></i> 请输入支付密码
        </div>
        <div class="inputBox" ref="inputBox">
          <label for="libaoCode">礼包码</label>
          <input id="libaoCode" placeholder="输入礼包码" type="text" v-model="libaoCode">
        </div>
        <div class="inputBox" style="margin-top:.98rem" ref="inputBox">
          <label for="passwordVal">支付密码</label>
          <input
            id="passwordVal"
            placeholder="输入支付密码"
            type="password"
            maxlength="6"
            v-model="passwordVal"
          >
        </div>
        <div class="maskbtn" @click="surePay()">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Loadmore } from "mint-ui";
import { GetYaoQing, userByPayHY } from "../../../api";
import { getGuid } from "../../../utils/index";
import direct from "./direct";
import { Toast } from "mint-ui";
import { hex_md5 } from "../../../utils/md5.js";

export default {
  data() {
    return {
      inviteArr: [],
      scrollMode: "auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
      totalpage: 0, //一共多少页数
      totalpage1: 0,
      pageNo: 0,
      PageSize: 10,
      id: localStorage.zyUserId,
      contentH: 0,
      isPayMask: false,
      passwordVal: "",
      GameID: "",
      libaoCode: ""
    };
  },
  mounted() {
    this.loadPageList(this.pageNo); //初次访问查询列表
    this.$nextTick(function() {
      this.contentH =
        document.documentElement.clientHeight -
        this.$refs.wrapper.getBoundingClientRect().top;
    });
  },
  components: {
    "v-loadmore": Loadmore
  },
  methods: {
    //激活按钮
    activate(item) {
      this.passwordVal = "";
      this.libaoCode = "";
      this.GameID = item.GameID;
      this.isPayMask = true;
    },
    surePay() {
      if (!this.passwordVal) {
        Toast({
          message: "请输入密码",
          duration: 2000
        });
        return;
      }
      this.sendLivcard();
    },
    //赠送礼包码
    sendLivcard() {
      userByPayHY({
        ID: this.id,
        LoginMachine: getGuid(),
        RegType: "1",
        MS: this.GameID,
        MC: this.libaoCode,
        JYEPass: hex_md5(this.passwordVal),
        YJELQss: ""
      }).then(res => {
        this.isPayMask = false;
        Toast({
          message: res.data.Content,
          duration: 2000
        });
      });
    },

    // 上拉加载
    loadBottom: function() {
      this.more(); // 上拉触发的分页查询
      this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    },
    more() {
      // 分页查询
      if (this.totalpage == 1) {
        this.pageNo = 1;
        this.allLoaded = true;
      } else {
        this.pageNo = parseInt(this.pageNo) + 1;
        this.allLoaded = false;
      }
      this.loadPageList(this.pageNo); //初次访问查询列表
    },
    loadPageList(pageNo) {
      GetYaoQing({
        ID: this.id,
        LoginMachine: getGuid(),
        YJEYhOld: "",
        YJEYhNew: "",
        PageNo: pageNo,
        RegType: "2",
        PageSize: this.PageSize
      }).then(res => {
        if (!res.data.EntityList[0].ZTLBTotal) {
          Toast({
            message: "暂无数据",
            duration: 2000
          });
          return;
        }
        this.inviteAll = res.data.EntityList[0];
        res.data.EntityList[0].ZTLB.forEach(item => {
          this.inviteArr.push(item);
        });
        this.totalpage = Math.ceil(
          res.data.EntityList[0].ZTLBTotal / this.pageSize
        );
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
.payMask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  .mian {
    width: 7.04rem;
    height: 7.1rem;
    background: #FFF;
    border-radius: 0.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    .title {
      width: 6.67rem;
      line-height: 1.08rem;
      border-bottom: 1px solid rgba(230, 230, 230, 1);
      margin: 0 auto;
      font-size: 16px;
      font-weight: 500;

      i {
        float: left;
      }
    }

    .content1 {
      width: 6.63rem;
      height: 3rem;
      margin: 0.5rem auto;
      border-bottom: 1px solid rgba(137, 137, 137, 1);
      text-align: center;
      box-sizing: border-box;
      padding-top: 0.5rem;

      .p {
        margin: 0.3rem auto;
        font-size: 14px;
      }

      .txt {
        font-weight: 500;

        .ps {
          font-size: 30px;
          display: inline-block;
          position: relative;
          bottom: 5px;
        }

        span {
          font-size: 40px;
        }
      }
    }

    label {
      width: 100%;
      text-align: left;
      display: inline-block;
      line-height: 0.6rem;
      color: rgba(255, 105, 51, 1);
    }

    .inputBox {
      width: 5.5rem;
      height: 0.66rem;
      margin: 0.75rem auto;

      input {
        width: 100%;
        height: 100%;
        background: rgba(215, 215, 215, 1);
        border-radius: 0.06rem;
        padding-left: 0.2rem;
      }

      input::placeholder {
        color: #fff;
      }
    }

    .maskbtn {
      width: 6.18rem;
      height: 1rem;
      line-height: 1rem;
      background: linear-gradient(-42deg, rgba(249, 71, 1, 1), rgba(250, 81, 5, 1), rgba(253, 110, 17, 1));
      box-shadow: 0px 3px 9px 0px rgba(91, 24, 0, 0.47);
      border-radius: 0.1rem;
      margin: 0 auto;
      color: #fff;
      font-size: 18px;
      margin-top: 1.4rem;
    }
  }
}

.invite_wrap {
  width: 100%;

  li {
    display: flex;
    height: 0.82rem;
    margin-bottom: 15px;

    .icon {
      flex: 0 1 0.72rem;
      width: 0.72rem;
      height: 0.73rem;
      border-radius: 50%;
      margin-right: 10px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .halfR {
      text-align: right;
      position: relative;

      .btn {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }

    .half {
      flex: 1;
      display: flex;
      flex-direction: column;

      .txt {
        font-size: 13px;
        line-height: 0.7rem;
        color: #4E5063;
      }

      .phone {
        font-size: 10px;
        line-height: 0.5rem;
        color: #4E5063;
      }

      .time {
        font-size: 10px;
        color: #919191;
      }

      .btn {
        width: 1.59rem;
        height: 0.44rem;
        line-height: 0.44rem;
        text-align: center;
        background: #4E5063;
        border-radius: 0.22rem;
        margin-top: 5px;
        font-size: 14px;
        color: #D6A163;
      }
    }
  }
}
</style>
